<template>
  <div class="index">
    <full-page :options="options" ref="fullpage">
      <ul class="hidden-xs" id="menu" ref="menu">
        <li
          @click="handleMove(index)"
          :data-menuanchor="item.value"
          :class="index === 0 ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="index"
        >
          <div>
            <a :href="'#' + item.value">{{ item.label }}</a>
            <span></span>
          </div>
        </li>
      </ul>
      <div id="content">
        <div class="section banner">
          <!-- 轮播图 -->
          <div class="swiper-container banner-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="https://s1.ax1x.com/2022/07/21/jqaWUx.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="https://s1.ax1x.com/2022/07/21/jqa58O.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="https://s1.ax1x.com/2022/07/21/jqdBdI.jpg" alt="" />
              </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
        <div class="section">
          <!-- 视频介绍 -->
          <div class="video">
            <div class="video-title">
              <h3>全屋智能家居系统</h3>
              <div>智能家居&nbsp;&nbsp;智慧生活</div>
            </div>
            <div class="nav-video">
              <video
                id="myVideo"
                @click="openVideo"
                src="@/assets/video/full.mp4"
              ></video>
              <img
                class="video-play"
                @click="openVideo"
                src="@/assets/img/fang.png"
                alt=""
              />
              <div class="move" @click="openVideo">点击观看</div>
            </div>
          </div>
        </div>
        <div class="section">
          <!-- 主营产品 -->
          <div class="product">
            <!-- <div style="height:10%"></div> -->
            <div class="prox">
              <div class="nav_product">
                <div class="nav_title">
                  <span class="English">PRODUCT</span>&nbsp;<span class="Wen"
                    >主营产品</span
                  >
                </div>
                <div class="xian"></div>
                <div>
                  <ul>
                    <li><a href="#">智能照明</a></li>
                    <span>│</span>
                    <li><a href="#">智能影音</a></li>
                    <span>│</span>
                    <li><a href="#">智能环境</a></li>
                    <span>│</span>
                    <li><a href="#">智能安防</a></li>
                  </ul>
                </div>
              </div>
              <div style="height: 15%; width: 100%"></div>
              <div class="product_con">
                <div class="product_conimg" v-for="(item,index) in proImgList" :key="index">
                  <img :src="item" alt="" />
                </div>
              </div>
              <div class="product_con_title">
                <div v-for="(item,index) in prodctTitle" :key="index">{{item}}</div>
              </div>
            </div>
            <div style="height: 10%; width: 100%"></div>
          </div>
        </div>
        <div class="section">
          <!-- 关于金巢 -->
          <div class="nav_com">
            <!-- <div style="height: 13%"></div> -->
            <div class="com">
              <div class="com_left">
                <div class="left_title">
                  <span class="English">COMPANY</span>&nbsp;<span class="Wen"
                    >关于金巢</span
                  ><span class="left_span">(可修改</span>
                  <div class="gai"></div>
                </div>
                <div class="left_con">
                  <p>
                    金巢灯饰名品生活馆坐落在长沙市南湖大市场灯饰城海威大厦36号。营业面积达3000多平方米，是目前我省规模最大，品种最齐，质量最优的专营高档名品灯饰的商场。本商场主要经营琪朗、开元、诺克三大国内知名品牌灯饰，也是该三大灯饰产品的湖南省一级经销代理商。
                  </p>
                </div>
                <div class="com_bottom">READ MORE</div>
              </div>

              <div class="com_right">
                <div class="swiper-container about-swiper">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in aboutImgList" :key="index">
                      <img :src="item" alt="" />
                    </div>
                  </div>
                  <!-- 如果需要导航按钮 -->
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <!-- team团队 -->
          <div class="team">
            <div class="conter">
                  <div class="conter_title"><span class="English">TEAM</span>&nbsp;<span class="Wen">团队</span></div>
                  <div class="contain">
                      <div id="sli" class="sli index-sli" alt="star">
                          <!-- 轮播图片数量可自行增减 -->
                          <div>
                              <a href="javascript:void(0)" class="img"><img src="https://s1.ax1x.com/2022/07/21/jqfcs1.jpg" /></a><span class="sli_01">小红 / Xiao Hong</span>
                          </div>

                          <div>
                              <a href="javascript:void(0)" class="img"><img src="https://s1.ax1x.com/2022/07/21/jqf7QA.jpg" /></a><span class="sli_02">小绿 / Xiao lu</span>
                          </div>
                          <div>
                              <a href="javascript:void(0)" class="img"><img src="https://s1.ax1x.com/2022/07/21/jqfLeP.jpg" /></a><span class="sli_03">小蓝 / Xiao Lan</span>
                          </div>
                          <div>
                              <a href="javascript:void(0)" class="img"><img src="https://s1.ax1x.com/2022/07/21/jqfXo8.jpg" /></a><span class="sli_04">小白 / Xiao Bai</span>
                          </div>
                          <div>
                              <a href="javascript:void(0)" class="img"><img src="https://s1.ax1x.com/2022/07/21/jqfxJg.jpg" /></a><span class="sli_05">小橙 / Xiao Cheng</span>
                          </div>
                      </div>
                  <!-- </div> -->
                  </div>
                  <!-- <div style="height:5%"></div> -->
            </div>
          </div>
        </div>
        <div class="section">
          <!-- news新闻 -->
          <div class="newyes">
            <div class="setNews_title">
              <span class="English">NEWS</span>
              <span class="Wen">&nbsp;新闻</span>
            </div>
            <div class="setNews_con">
              <div class="setcon" v-for="(item,index) in newsList" :key="index" @mouseover="newsTop($event)" @mouseout="newsDown($event)">
                <div class="set_time">{{item.time}}</div>
                <div class="p_FLine"></div>
                <div class="set_title">
                  {{item.title}}
                </div>
                <div class="set_ne">
                  {{item.content}}
                </div>
              </div>
            </div>
            <div class="setx">
              <div
                class="set_img"
                v-for="(item, index) in newsImgList"
                :key="index"
              >
                <img :src="item" alt="" />
              </div>
            </div>
            <!-- <div style="height: 5%"></div> -->
          </div>
        </div>
        <div class="section">
          <!-- 服务与支持 -->
          <div class="service">
            <div class="service_title">
              <span class="English">SERVICE</span>&nbsp;<span class="Wen"
                >服务支持</span
              >
            </div>
            <div class="service_con">
              <div class="service_left">
                <img src="https://s1.ax1x.com/2022/07/21/jqNTJO.png" alt="" />
              </div>
              <div class="service_right">
                <ul>
                  <li v-for="(item, index) in serImgList" :key="index">
                    <div>
                      <img :src="item.img" alt="" />
                    </div>
                    <span>{{ item.title }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="section us">
          <!-- 联系我们 -->
          <div class="btnxia" style="height: 100%;width:'100%'">
                <div style="height: 15%;"></div>
                <!-- 联系我们 -->
                <div class="bottom">
                    <div class="bottom_con">
                        <div class="btns">
                            <div><span class="English">CONTACT US</span><span class="Wen">&nbsp;联系我们</span></div>
                            <div>长沙市金巢灯饰有限公司</div>
                            <div>联系电话:0731-82293171</div>
                            <div>公司地址:长沙市南湖市场海威大厦36号</div>
                            <ul class="tu">
                                <li @mouseover="botmTop($event)" @mouseout="botmDown($event)">
                                  <img class="tuxian" src="https://s1.ax1x.com/2022/07/22/jOpDdf.png" alt="">
                                  <img class="tuimg" src="https://s1.ax1x.com/2022/07/22/jOpro8.png" alt="">
                                </li>
                                <li @mouseover="botmTop($event)" @mouseout="botmDown($event)">
                                  <img class="tuxian" src="https://s1.ax1x.com/2022/07/22/jOp6Jg.png" alt="">
                                  <img class="tuimg" src="https://s1.ax1x.com/2022/07/22/jOpS2j.png" alt="">
                                </li>
                                <li @mouseover="botmTop($event)" @mouseout="botmDown($event)">
                                  <img class="tuxian" src="https://s1.ax1x.com/2022/07/22/jOpgzj.png" alt="">
                                  <img class="tuimg" src="https://s1.ax1x.com/2022/07/22/jOpRQs.png" alt="">
                                </li>
                                <li @mouseover="botmTop($event)" @mouseout="botmDown($event)">
                                  <img class="tuxian" src="https://s1.ax1x.com/2022/07/22/jOpfLq.png" alt="">
                                  <img class="tuimg" src="https://s1.ax1x.com/2022/07/22/jOp4e0.png" alt="">
                                </li>
                            </ul>
                            <div style="width:120px;height:120px;text-align:left;margin-top: 20px;">
                                <img style="width:120px;height:120px;" src="@/assets/img/jc.gif" alt="">
                            </div>
                        </div>
                        <div class="mapApi">
                            <iframe width="800" height="460" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src="https://surl.amap.com/awW6qOla0S"></iframe>
                        </div>
                    </div>
                </div>
                <div class="tup">
                    <img src="https://s1.ax1x.com/2022/07/22/jOpTFU.png" alt="">
                </div>
            </div>
        </div>
      </div>
    </full-page>

    <!-- 视频放大 -->
    <div class="vieos">
      <div class="vieo_con">
        <video id="vieoOpen" y controls src="@/assets/video/full.mp4"></video>
        <div class="cha" @click="closeVideo">X</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  components: {},
  data() {
    return {
      timer:'',//team团队轮播定时器
      banSwiper: "", //banner图swiper实例
      aboutSwiper: "", //关于金巢swiper实例
      teamSwiper: "", //关于金巢swiper实例
      newsImgList: [
        "https://s1.ax1x.com/2022/07/21/jqE2KH.jpg",
        "https://s1.ax1x.com/2022/07/21/jqE7RS.jpg",
        "https://s1.ax1x.com/2022/07/21/jqEqMQ.jpg",
        "https://s1.ax1x.com/2022/07/21/jqEjZn.jpg",
      ], //news新闻 图片数组
      serImgList: [
        {
          img: "https://s1.ax1x.com/2022/07/21/jqK8eg.png",
          title: "01.需求沟通",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKBOU.png",
          title: "02.上门勘测",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKyTJ.png",
          title: "03.方案设计",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKWSx.png",
          title: "04.合同签订",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqK4OO.png",
          title: "05.施工对接",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKImD.png",
          title: "06.安装调试",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKqfI.png",
          title: "07.竣工验收",
        },
        {
          img: "https://s1.ax1x.com/2022/07/21/jqKX1P.png",
          title: "08.无忧售后",
        },
      ],//服务与支持 图片与文字数组
      newsList:[
        {
          time:'06-30',
          title:'长沙设计公司排名准确吗？室内设计的一些常识',
          content:' 室内设计的一些常识长沙设计公司排名和建筑设计的关系非常密切，相互渗透。',
        },
        {
          time:'06-30',
          title:'金巢·巡检工作日 35 |7月工地巡检',
          content:' 一片的新绿把夏天填成绵长的诗延绵的降雨短暂停歇气温上升，阳光灼热一片的新绿',
        },
        {
          time:'06-30',
          title:'金巢·实景Vol 35 | 竹影雅韵，隐逸东方美学',
          content:' 设计的一些常识长沙设计公司排名设计和建筑设计的关系非常密切，相互渗透。',
        },
        {
          time:'06-30',
          title:'长沙设计公司排名前面的有谁？企业展厅设计需要注意哪些问题？数字展厅是如何的？',
          content:' 长沙设计公司,行业十大品牌,中高端装修之选,装修零投诉企业,天然原木全房定制,打造高品质健康环保空间.选择金巢',
        },
      ],//新闻数组
      aboutImgList:[
        'http://www.shanyidesign.com/repository/image/IqriQk8PQTCl-uERP88jmw.jpg',
        'http://www.shanyidesign.com/repository/image/Uinxup3lQPCLvadLdJvKAg.jpg',
        'http://www.shanyidesign.com/repository/image/e9ibl2LXTqK7yzMqJlKw2w.jpg',
      ],//关于金巢 轮播图片数组
      proImgList:[
        'https://s1.ax1x.com/2022/07/21/jqlGwD.jpg',
        'https://s1.ax1x.com/2022/07/21/jqltFH.jpg',
        'https://s1.ax1x.com/2022/07/21/jqldSI.jpg',
        'https://s1.ax1x.com/2022/07/21/jqlBOf.jpg',
      ],//主营产品 图片数组
      prodctTitle:[
        '金巢 · 实景 | 芙佳花园370㎡现代法式',
        '金巢 · 实景 | 江山壹号220㎡诧寂风',
        '金巢 · 实景 | 湘江北尚100㎡极简风',
        '金巢 · 实景 | 新世纪花苑160㎡北欧风',
      ],//主营产品 文本
      teamImgLIst:[
        'https://s1.ax1x.com/2022/07/21/jqfcs1.jpg',
        'https://s1.ax1x.com/2022/07/21/jqf7QA.jpg',
        'https://s1.ax1x.com/2022/07/21/jqfLeP.jpg',
        'https://s1.ax1x.com/2022/07/21/jqfXo8.jpg',
        'https://s1.ax1x.com/2022/07/21/jqfxJg.jpg',
      ],//team团队 图片数组
      options: {
        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
        // 是否显示导航，默认为false
        anchors: [
          "page1",
          "page2",
          "page3",
          "page4",
          "page5",
          "page6",
          "page7",
          "page8",
        ], // 注意不带#
        menu: "#menu", // 绑
        recordHistory: true,
        onLeave: (index, nextIndex, direction) => {
          if (this.$("#menu li").hasClass("active") == true) {
            this.$("#menu li").eq(nextIndex.index).siblings().find("a").css({
              background: "#949494",
            });
            this.$("#menu li").eq(nextIndex.index).find("a").css({
              background: "white",
            });
          }
        },
      },
      menuList: [
        { value: "page1" },
        { value: "page2" },
        { value: "page3" },
        { value: "page4" },
        { value: "page5" },
        { value: "page6" },
        { value: "page7" },
        { value: "page8" },
      ],
    };
  },
  created(){
  },
  mounted() {
    // 实例banner轮播
    this.banSwiper = new this.$swiper(".banner-swiper", {
      mousewheel: true,
      loop: true, // 循环模式选项
      speed: 1000,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      // effect: "coverflow",
      simulateTouch: false, //禁止鼠标模拟
    });
    this.$refs.fullpage.api.setLockAnchors(true);

    // 实例关于金巢轮播
    this.aboutSwiper = new this.$swiper(".about-swiper", {
      mousewheel: true,
      loop: true, // 循环模式选项
      speed: 1000,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      // effect: "coverflow",
      simulateTouch: false, //禁止鼠标模拟
    });

    var autoLb = true; //autoLb=true为开启自动轮播
    var slideNub = document.querySelectorAll('.contain img').length; //获取轮播图片数量
    for (var i = 0; i < slideNub; i++) {
        this.$(".sli .img:eq(" + i + ")").attr("data-sli-imgId", i);
    }
    
    //根据轮播图片数量设定图片位置对应的class
    if (slideNub == 1) {
        for (var i = 0; i < slideNub; i++) {
            this.$(".sli .img:eq(" + i + ")").addClass("img3");
        }
    }
    if (slideNub == 2) {
        for (var i = 0; i < slideNub; i++) {
            this.$(".sli .img:eq(" + i + ")").addClass("img" + (i + 3));
        }
    }
    if (slideNub == 3) {
        for (var i = 0; i < slideNub; i++) {
            this.$(".sli .img:eq(" + i + ")").addClass("img" + (i + 2));
        }
    }
    if (slideNub > 3 && slideNub < 6) {
        for (var i = 0; i < slideNub; i++) {
            this.$(".sli .img:eq(" + i + ")").addClass("img" + (i + 1));
        }
    }
    //自动轮播
    if(autoLb){
      this.timer = setInterval(()=> {
          left();
      }, 3000);
    }

    //左滑动
    var left = () => {
        var fy = new Array();
        for (i = 0; i < slideNub; i++) {
            fy[i] = this.$(".sli .img[data-sli-imgId=" + i + "]").attr("class");
        }
        for (i = 0; i < slideNub; i++) {
            if (i == (slideNub - 1)) {
                this.$(".sli .img[data-sli-imgId=" + i + "]").attr("class", fy[0]);
            } else {
                this.$(".sli .img[data-sli-imgId=" + i + "]").attr("class", fy[i + 1]);
            }
        }
        slideLi();
    }

    //修改当前最中间图片对应按钮选中状态
    var slideLi=()=> {
        var slideList = parseInt(this.$(".sli .img3").attr("data-sli-imgId")) + 1;
        this.$(".sli .img3").parent().siblings().find('span').hide()
        this.$(".sli .img3").next().show()

    }
    
  },
  methods: {
    //联系我们 社交app图片效果
    botmTop(e){
      this.$(e.currentTarget).find('.tuxian').hide()
      this.$(e.currentTarget).find('.tuimg').show().css({ 'transform': 'scale(1.2)' })
    },
    //联系我们 社交app图片效果
    botmDown(e){
      this.$(e.currentTarget).find('.tuxian').show()
      this.$(e.currentTarget).find('.tuimg').hide()
    },
    //news新闻放上动画
    newsTop(e) {
      this.$(e.currentTarget)
        .find(".p_FLine")
        .stop()
        .animate({ width: "100%" }, 10);
      this.$(e.currentTarget).stop().animate({ "margin-top": "0" }, 500);
      this.$(e.currentTarget).find(".set_time").css({ color: "black" });
    },
    // news新闻放下动画
    newsDown(e) {
      this.$(e.currentTarget)
        .find(".p_FLine")
        .stop()
        .animate({ width: "0" }, 10);
      this.$(e.currentTarget).stop().animate({ "margin-top": "15px" }, 500);
      this.$(e.currentTarget).find(".set_time").css({ color: "#999" });
    },
    //fullpage.js 菜单导航点击
    handleMove(index) {
      this.$refs.fullpage.api.moveTo(index + 1, 0);
    },
    //视频播放
    openVideo() {
      this.$(".vieos").show();
      this.$("#vieoOpen")[0].play();
      this.$(".header").hide();
    },
    //视频关闭
    closeVideo() {
      this.$(".vieos").hide();
      this.$("#vieoOpen")[0].pause();
      this.$(".header").show();
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.$refs.menu.remove();
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/style/comm";
//联系我们 第八屏
.us{
  padding: 0 !important;
  .btnxia{
    height: 100%;
    width:100%;
    .bottom{
      width: 100%;
      height: 45%;
      .bottom_con{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        padding-top: 3%;
        .btns{
          width: 35%;
          display: flex;
          flex-direction: column;
          line-height: 2.5;
          div:nth-child(1) {
            font-size: 21px;
            text-align: left;
          }
          div:nth-child(2) {
            font-size: 18px;
            text-align: left;
            margin: 3px 0;
          }
          div:nth-child(3),
          div:nth-child(4) {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            text-align: left;
          }
          .tu{
            display: flex;
            margin-top: 10px;
            .tuimg {
              display: none;
            }
            img{
              width: 40px;
              cursor: pointer;
            }
          }
        }
        .mapApi{
          width: 65%;
          display: flex;
          @media #{$lg} {
            .ifr_map {
              width: 800px;
              height: 420px;
            }
          }
          @media #{$dlg} {
            .ifr_map {
              width: 800px;
              height: 460px;
            }
          }
          
        }
      }
    }
    .tup{
      width: 100%;
      height: 40%;
      background-color: rgba(0, 0, 0, .8);
      position: absolute;
      z-index: -1;
      img {
        width: 100%;
        // height: 100%;
        object-fit: cover;
      }
    }
  }
}
//服务与支持 第七屏
.service {
  margin-top: 3%;
  .service_title {
    width: 100%;
    margin: 0 auto;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
  }
  .service_con {
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0 auto;
    .service_left {
      width: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .service_right {
      width: 50%;
      background-color: #f1f1f1;
      ul {
        display: flex;
        flex-wrap: wrap;
        margin-left: 20px;
        margin-top: 20px;
        height: 100%;
        li {
          width: 25%;
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          div {
            cursor: pointer;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #dcdcdc;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          span {
            cursor: pointer;
            font-size: 14px;
          }
          span:hover {
            color: #c41818;
          }
          img {
            width: 45px;
            height: 45px;
            transition: all linear 0.3s;
          }
          img:hover {
            transform: scale(1.3);
            transition: all linear 0.5s;
          }
        }
      }
    }
  }
}
//news新闻 第六屏
.newyes {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .setNews_title {
    height: 10%;
    text-align: left;
    font-size: 26px;
    display: flex;
    align-items: center;
    padding: 0 0 10px 20px;
    color: #666666;
  }
  .setNews_con {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    cursor: pointer;
    .setcon {
      width: 25%;
      padding-right: 3%;
      height: 160px;
      margin-top: 15px;
      padding: 0 20px 0 20px;
      overflow: hidden;
      .set_time {
        color: #c0c0c0;
        font-size: 22px;
        font-weight: lighter;
        font-family: Arial;
        text-align: left;
      }
      .p_FLine {
        border-top-color: black;
        border-top-width: 1px;
        border-top-style: solid;
        margin: 10px 0;
        width: 0;
        transition: all 0.5s ease;
      }
      .set_title {
        height: 40px;
        line-height: 40px;
        font-weight: 200;
        color: #333;
        font-size: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      .set_ne {
        font-size: 12px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        line-height: 2em;
        text-align: left;
        color: #999;
      }
    }
  }
  .setx {
    height: 35%;
    width: 100%;
    display: flex;
    cursor: pointer;
    .set_img {
      width: 25%;
      height: 75%;
      padding: 0 20px 0 20px;
      img {
        width: 100%;
        height: 90%;
      }
    }
  }
}
//team团队 第五屏
.team{
  height: 100%;
 .conter{
    width: 100%;
    height: 80%;
    .conter_title{
       height: 15%;
        width: 1140px;
        margin: 0 auto;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .contain{
      margin: 0 auto;
      height: 85%;
      .sli{
        height: 100% !important;
        width: 100%;
        min-height: 180px;
        overflow: hidden;
        position: relative;
        z-index: 0;
        .img1 {
          width: 25%;
          height: 75%;
          top: 7%;
          left: 18%;
          z-index: 1;
          -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.20, rgba(255, 255, 255, 0)));
        }
        .img2 {
          width: 35%;
          height: 80%;
          top: 5%;
          left: 26%;
          z-index: 2;
          -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.20, rgba(255, 255, 255, 0)));
        }
        .img3 {
          width: 35%;
          height: 90%;
          top: 0;
          left: 33%;
          z-index: 3;
          -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.10, rgba(255, 255, 255, 0)));
        }
        .img4 {
          width: 35%;
          height: 80%;
          top: 5%;
          left: 39%;
          z-index: 2;
          -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.20, rgba(255, 255, 255, 0)));
        }
        .img5 {
          width: 45%;
          height: 75%;
          top: 7%;
          left: 46%;
          z-index: 1;
          -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.20, rgba(255, 255, 255, 0)));
        }
        .sli_01,
        .sli_02,
        .sli_03,
        .sli_04,
        .sli_05 {
            display: none;
            position: absolute;
            bottom: 0%;
            left: 51%;
            transform: translate(-51%, -5px);
            font-size: 20px !important;
            color: #000000 !important;
        }
        .img {
            overflow: hidden;
            position: absolute;
            transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
            
            img {
              height: 100%;
              background-color: black;
              -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgba(255, 255, 255, 0.15)), color-stop(0.20, rgba(255, 255, 255, 0)));
            }
        }
      }
    }
 }
}
//关于金巢 第四屏
.nav_com {
  height: 90%;
  position: relative;
  top: 10%;
  bottom: 0;
  .com {
    width: 100%;
    height: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .com_left {
      width: 50%;
      height: 100%;
      text-align: left;
      padding: 3% 3% 0 0;
      .left_title {
        font-size: 21px;
        position: relative;
      }
      .left_con {
        font-size: 16px;
        margin: 10% 0;
        text-indent: 2em;
        letter-spacing: 1px;
        display: flex;
        color: #6f6f6f;
        justify-content: center;
        align-items: center;
        p {
          line-height: 2.5;
        }
      }
      .com_bottom {
        cursor: pointer;
        width: 20%;
        height: 30px;
        color: white;
        background: #525252;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        padding: 2px 10px;
      }
    }
    .com_right {
      width: 50%;
      height: 85%;
      overflow: hidden;
      .about-swiper {
        .swiper-button-prev {
          position: sticky;
          bottom: 10%;
          left: 85%;
        }
        .swiper-button-next {
          position: sticky;
          bottom: 10%;
          left: 93%;
        }
        .swiper-button-prev:hover {
          background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E") !important;
        }
        .swiper-button-next:hover {
          background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E") !important;
        }
        position: relative;
        background-color: #fff;
        margin-top: 2%;
        height: 100%;
        width: 100%;
        img {
          height: 100%;
          width: 100%;
          transition: all linear 0.3s;
          cursor: pointer;
        }
        img:hover {
          transform: scale(1.1);
          transition: all linear 0.5s;
        }
      }
    }
  }
}
//主营产品 第三屏
.product {
  width: 100%;
  height: 100%;
  font-size: 16px;
  .prox {
    height: 90%;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .nav_product {
      position: relative;
      margin: 0 auto;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nav_title {
        font-size: 24px;
      }
      .xian {
        position: absolute;
        bottom: -5%;
        left: 0%;
        height: 2px;
        width: 100%;
        background-image: radial-gradient(
          555px 555px at 555px 0,
          #c6c6c6,
          #f3f3f3
        );
      }
      a {
        color: #929292;
        flex-direction: none;
      }
      a:hover {
        color: black;
        // border-bottom: 2px solid black;
      }
      ul {
        display: flex;
        color: #6f6f6f;
      }
      ul span {
        display: inline-block;
        width: 30px;
        text-align: center;
      }
    }
    .product_con {
      margin: 0 auto;
      height: 35%;
      width: 98%;
      display: flex;
      justify-content: space-between;
      .product_conimg {
        position: relative;
        width: 23%;
        text-align: center;
        display: flex;
        text-align: center;
        justify-content: center;
        overflow: hidden;
        div {
          display: none;
          color: white;
          cursor: pointer;
          position: absolute;
          left: 50%;
          bottom: -10px;
          transform: translate(-50%, 0);
          width: 250px;
          height: 200px;
          background: rgba(0, 0, 0, 0.3);
          line-height: 180px;
          overflow: hidden;
        }
        img {
          cursor: pointer;
          transition: all linear 0.3s;
        }
        img:hover {
          transform: scale(1.1);
          transition: all linear 0.5s;
        }
      }
    }
    .product_con_title {
      margin: 0 auto;
      height: 35%;
      width: 98%;
      display: flex;
      justify-content: space-between;
      div {
        position: relative;
        width: 23%;
        height: 50%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }
  }
}
//视频 第二屏
.vieos {
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 99999;
  @media #{$sm} {
    .vieo_con {
      height: 320px;
      width: 710px;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      #vieoOpen {
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
      }
      .cha {
        height: 20px;
        text-align: center;
        width: 20px;
        position: absolute;
        top: 0px;
        right: -10px;
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(222, 223, 221);
        line-height: 20px;
      }
    }
  }
  @media #{$md} {
    .vieo_con {
      height: 415px;
      width: 930px;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      #vieoOpen {
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
      }
      .cha {
        height: 20px;
        text-align: center;
        width: 20px;
        position: absolute;
        top: 0px;
        right: -10px;
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(222, 223, 221);
        line-height: 20px;
      }
    }
  }
  @media #{$lg} {
    .vieo_con {
      height: 500px;
      width: 1140px;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      #vieoOpen {
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
      }
      .cha {
        height: 20px;
        text-align: center;
        width: 20px;
        position: absolute;
        top: 0px;
        right: -10px;
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(222, 223, 221);
        line-height: 20px;
      }
    }
  }
  @media #{$dlg} {
    .vieo_con {
      height: 500px;
      width: 1140px;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      #vieoOpen {
        height: 100%;
        width: 100%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
      }
      .cha {
        height: 20px;
        text-align: center;
        width: 20px;
        position: absolute;
        top: 0px;
        right: -10px;
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(222, 223, 221);
        line-height: 20px;
      }
    }
  }
}
.video {
  height: 100%;
  position: relative;
  .video-title {
    h3 {
      font-weight: bold;
    }
    div {
      font-size: 18px;
    }
  }
  .nav-video {
    margin-top: 10px;
    height: 70%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    #myVideo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      max-width: 100%;
    }
    .video-play {
      width: 50px;
      height: 50px;
      transform: translate(-50%, -50%);
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 0;
    }
    .move {
      cursor: pointer;
      color: white;
      font-size: 24px;
      position: absolute;
      top: 60%;
      left: 50%;
      font-weight: bold;
      letter-spacing: 5px;
      transform: translate(-50%, -50%);
    }
  }
}

//轮播 第一屏
.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}
.banner-swiper {
  position: relative;
  background-color: #fff;
  margin-top: 2%;
  &::before {
    display: block;
    content: "";
    padding-top: 40%;
  }
  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  .swiper-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.5);
  }
}
//fullpage 菜单导航
#menu {
  margin: 0;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translate(0, -50%);
  padding: 30px 0;
  z-index: 999;
}

#menu li {
  margin-top: 5px;
  height: 15px;
  width: 15px;
  margin-left: 5px;
  line-height: 26px;
  padding: 2px;
  background-position: center;
  background-size: auto auto;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
}
#menu li div {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid transparent;
}

#menu li span {
  position: absolute;
  right: 4.5px;
  width: 2px;
  height: 20px;
  margin: 0px 0 0 5px;
  content: "";
  background: rgb(155 155 155 / 0.2);
  z-index: -1;
}

#menu a {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #949494;
  z-index: 999;
}
#menu li:nth-child(1) a {
  background: white;
}
#menu li.active {
  background-color: white;
  border: 1.4px solid #5a5a5a;
}

//fullpage 内容显示部分
#content {
  .section {
    text-align: center;
    padding: 70px 4% 0 4%;
  }
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
//字体
.English {
  font-family: 微软雅黑;
  color: #666;
  font-size: 24px;
}
.Wen {
  color: #000000;
  font-family: 微软雅黑;
  font-size: 24px;
}
</style>
